<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>假日倒计时</title>
    <!-- 引入样式文件 -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
    />
  </head>
  <body>
    <div id="app">
      <!-- <div>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </div> -->
      <div class="content">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="top">
            距离
            <div class="h1">{{item.name}}放假</div>
            <div>{{item.long}}天</div>
          </div>
          <div class="h2">({{item.date}} ~ {{item.endDate}})</div>
          <div class="h3" v-if="!item.timeOut">
            还有
            <div v-if="item.Day>0">{{item.Day}}天</div>
            <div v-if="item.Hour>0">{{item.Hour}}小时</div>
            <div v-if="item.Min>0">{{item.Min}}分钟</div>

            {{item.Sec}}秒
          </div>
          <div v-else>又过完一个假期</div>
        </div>
      </div>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入 Vue 和 Vant 的 JS 文件 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

  <script>
    let dateArr = [
      {
        name: "中秋",
        date: "2021-09-17 00:00:00",
        endDate: "2021-09-21 00:00:00",
        long: "3",
      },
      {
        name: "国庆",
        date: "2021-10-01 00:00:00",
        endDate: "2021-10-07 00:00:00",
        long: "7",
      },
    ];
    new Vue({
      el: "#app",
      data: {
        message: "Hello Vue!",
        list: [],

        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(2021, 0, 17),
      },
      created() {
        this.getTimeArr();
      },

      methods: {
        getTimeArr() {
          let list = [];
          dateArr.forEach((el) => {
            const res = this._getTime(el.date);
            // console.log("res", { ...res, ...el });

            el.date = el.date.substring(0, 10);
            el.endDate = el.endDate.substring(0, 10);
            list.push({ ...res, ...el });
          });
          this.list = list;
          setTimeout(() => {
            this.getTimeArr();
          }, 500);
        },

        _getTime(date) {
          let now = Math.round(new Date() / 1000);
          let f1 = Math.round(new Date(date).getTime() / 1000);

          let res = f1 - now;
          if (res < 0) {
            return {
              Day: 0,
              Hour: 0,
              Min: 0,
              Sec: 0,
              timeOut: true,
            };
          }
          // console.log(f1);
          // console.log(now);
          // console.log(res);

          let Day = Math.floor(res / 86400);
          res = res - Day * 86400;

          // console.log("???" + res);
          let Hour = Math.floor(res / 3600);
          res = res - Hour * 3600;
          let Min = Math.floor(res / 60);
          res = res - Min * 60;

          // console.log("多少天", Day);
          // console.log("多少小时", Hour);
          // console.log("多少分钟", Min);
          // console.log("多少秒", res);
          return {
            Day,
            Hour,
            Min,
            Sec: res,
            timeOut: false,
          };
        },
      },
    });

    Vue.use(vant.DatetimePicker);
  </script>

  <style>
    #app {
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 30px;
      box-sizing: border-box;
    }
    
    .h1 {
      font-size: 32px;
      margin: 0 10px;
    }

    .h2 {
      color: #666;
    }
    .h3 {
      display: flex;
    }
    .top {
      display: flex;
      align-items: baseline;
    }
    .item {
      margin-top: 50px;
    }
  </style>
</html>
